<!--领航宣讲资源库(视频库-教案库-案例库-文献库)公共部分-->
<template>
  <div class="pilot-lecture">
    <div class="lecture-container">
      <!--搜索区域-->
      <div class="lecture-search">
        <div class="search-input">
          <el-input clearable v-model="search.queryText" placeholder="请输入关键字查询" @blur="getPreachList">
            <template #append><el-button @click="getPreachList">搜索</el-button></template>
          </el-input>
        </div>
      </div>
      <!--数据列表-->
      <div class="lecture-list">
        <div class="lecture-data" v-for="(item, index) in informationList" :key="index">
          <div :class="item.time ? 'lecture-message' : 'lecture-message lecture-right'">
            <!--序号-->
            <div class="lecture-index">{{ serialNumber(index + 1) }}</div>
            <div class="lecture-content">
              <!--标题-->
              <!--只有viewLibraryList列表中的库可以查看详情-->
              <div
                :class="viewLibraryList.includes(libraryTypeId) ? 'lecture-title title-hover' : 'lecture-title'"
                @click="contentDetails(item)"
              >
                {{ item.title }}
              </div>
              <!--简介/来源 视频库不展示内容简介-->
              <div class="lecture-intro" v-if="libraryTypeId !== 'video'">
                <span>{{ introSource(item).title }}</span>
                {{ introSource(item).content }}
              </div>
              <!--关键词 只有文献库展示关键词-->
              <div class="lecture-intro" v-if="libraryTypeId === 'literature'">
                <span>关键词：</span>
                {{ item.keyWord }}
              </div>
              <!--附件-->
              <div class="lecture-attachments-list" v-if="!hasEmptyObject(item.fileList)">
                <div class="lecture-attachments" v-for="i in item.fileList" :key="i.id">
                  <div class="attachments-icon"></div>
                  <el-tooltip content="点击下载" placement="bottom" effect="light">
                    <template #content>
                      <el-button link type="primary" size="small" @click="attachmentDownload(i)">下载</el-button>
                      <el-button link type="primary" size="small" @click="onlinePreview(i)">在线预览</el-button>
                    </template>
                    <div class="attachments-name">{{ i.fileName }}</div>
                  </el-tooltip>
                </div>
              </div>
            </div>
          </div>
          <!--时间-->
          <div class="lecture-time lecture-right" v-if="item.lectureTime">{{ item.lectureTime }}</div>
        </div>
        <!-- 如果人才列表和返回数据相等 则不需要查看更多按钮 -->
        <div class="see-more" @click="seeMore" v-if="total !== informationList.length">
          <div class="see-more-text">查看更多</div><el-icon><ArrowDown /></el-icon>
        </div>
      </div>
    </div>
    <!--详细内容弹窗-->
    <detailedContentDialog ref="contentDialogRef" :descriptionList="descriptionList"></detailedContentDialog>
    <!-- 视频播放   -->
    <videoPopup ref="videoPopupRef" :video-address="videoAddress" />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { attachmentPreview, downloadOnline, preachShow, getDetail } from "@/api/navigationLecture";
import detailedContentDialog from "@/components/Dialog/detailedContentDialog";
import videoPopup from "@/components/Dialog/videoPopup";
import { hasEmptyObject } from "@/utils/validate";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const props = defineProps({
  // 库种类型id
  libraryTypeId: {
    type: String,
    default: "",
  },
});
const informationList = ref([]); // 列表数据
const descriptionList = ref({}); // 弹窗详细内容
const videoAddress = ref(""); // 视频播放地址
const viewLibraryList = ref(["video", "case"]); // 查看详情库列表
const contentDialogRef = ref(); // 详情内容弹窗组件ref值
const videoPopupRef = ref(); // 视频播放弹窗ref值
const total = ref(0); // 总条数
const data = reactive({
  //基本信息表单
  search: {
    pageNum: 1,
    pageSize: 10,
    queryText: "", // 人才搜索
  },
});
const { search } = toRefs(data); // 搜索表单

onMounted(() => {
  getPreachList();
});
/**
 * 获取宣讲列表
 */
const getPreachList = async () => {
  try {
    proxy.$modal.loading("请稍后...");
    const {
      data: { list },
      total: totalValue,
    } = await preachShow(props.libraryTypeId, search.value);
    informationList.value = list;
    total.value = totalValue;
  } catch (error) {
    throw new Error(error);
  } finally {
    proxy.$modal.closeLoading();
  }
};
/**
 * 查看更多
 */
const seeMore = () => {
  // 每次点击查看更多 添加10条数据
  search.value.pageSize = search.value.pageSize + 10;
  getPreachList();
};
/**
 * 点击标题打开详细内容
 */
const contentDetails = (item) => {
  if (props.libraryTypeId === "case") {
    // 如果是案例库 获取详细内容 并打开弹窗展示
    getDetailList(item.id);
  } else if (props.libraryTypeId === "video") {
    // 如果没有视频播放地址 进行提示
    !item.videoPlayPath && ElMessage.warning("视频播放失败!");
    // 如果是视频库 获取视频播放地址 并打开视频播放弹窗
    videoAddress.value = item.videoPlayPath;
    proxy.$refs?.videoPopupRef.show(!!item.videoPlayPath);
  }
};
/**
 * 案例库获取详情
 * @param id 详情id
 */
const getDetailList = async (id) => {
  try {
    proxy.$modal.loading("请稍后...");
    const { data } = await getDetail(props.libraryTypeId, { id });
    descriptionList.value = data; // 获取到数据 赋值给弹出表单
    proxy.$refs?.contentDialogRef.show(true); // 打开案例库详情弹窗
  } catch (error) {
    ElMessage.error(error);
  } finally {
    proxy.$modal.closeLoading();
  }
};
/**
 * 序号转换
 * @param value 当前序号
 */
const serialNumber = (value) => {
  // 序号10以下 前面补0
  return value < 10 ? `0${value}` : value;
};
/**
 * 附件下载
 * @param file 当前附件信息
 */
const attachmentDownload = async (file) => {
  try {
    proxy.$modal.loading("请稍后...");
    const { data } = await downloadOnline({ id: file.id });
    window.open(data, "_blank"); // 新窗口打开下载
    ElMessage.success("附件下载成功");
  } catch (error) {
    ElMessage.error(error);
  } finally {
    proxy.$modal.closeLoading();
  }
};
/**
 * 附件在线预览
 */
const onlinePreview = async (file) => {
  const { data } = await attachmentPreview({ id: file.id });
  window.open(data, "_blank"); // 新窗口打开预览
};
/**
 * 文献库展示信息
 * @param item
 */
const introSource = (item) => {
  // 文献库展示来源相关信息
  const type = props.libraryTypeId === "literature";
  return {
    title: type ? "来源：" : "内容简介：",
    content: type ? item.source : item.briefIntroduction,
  };
};
</script>

<style scoped lang="less">
.pilot-lecture {
  height: 650px;
  .lecture-container {
    height: 100%;
    background: #ffffff;
    border-radius: 8px;
    padding: 25px 0 0 25px;
    // 搜索区域
    :deep(.lecture-search) {
      width: 25%;
      height: 10%;
      // 搜索框
      .search-input {
        width: 100%;
        border: 1px solid #cccccc;
        border-radius: 22px;
        padding-left: 10px;
        .el-input__wrapper {
          height: 44px;
          background-color: transparent; /*覆盖原背景颜色，设置成透明 */
          border: 0;
          box-shadow: 0 0 0 0px;
        }
        .el-input-group__append {
          background: #dd1d19;
          border-radius: 22px;
          border: 0;
          box-shadow: 0 0 0 0px;
          margin: 3px;
          span {
            font-size: 14px;
            color: #ffffff;
            font-weight: 700;
          }
        }
      }
    }
    // 数据列表
    .lecture-list {
      width: 100%;
      height: 90%;
      overflow-y: scroll;
      overflow-x: hidden;
      &::-webkit-scrollbar {
        width: 10px;
        height: 8px;
      }
      &::-webkit-scrollbar-thumb {
        background-color: #afafaf;
        border-radius: 6px;
      }
      .lecture-data {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 0;
        border-bottom: 1px solid #f5f5f5;
      }
      // 查看更多
      .see-more {
        font-size: 14px;
        color: #333333;
        cursor: pointer;
        display: flex;
        align-items: center;
        margin: 15px 45%;
        .see-more-text {
          margin-right: 5px;
        }
      }
      .lecture-message {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        // 序号
        .lecture-index {
          font-size: 16px;
          font-style: italic;
          color: #dd1d19;
          line-height: 24px;
          font-weight: 700;
          margin-right: 15px;
        }
        .lecture-content {
          width: 100%;
          // 标题
          .lecture-title {
            width: 100%;
            font-size: 16px;
            color: #333333;
            line-height: 24px;
            font-weight: 700;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2; /* 控制显示的行数 */
          }
          .title-hover {
            &:hover {
              text-decoration: underline; // 添加下划线
              cursor: pointer;
            }
          }
          // 简介
          .lecture-intro {
            width: 100%;
            font-size: 12px;
            color: #333333;
            line-height: 18px;
            font-weight: 400;
            margin: 3px 0;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2; /* 控制显示的行数 */
          }
          // 附件列表
          .lecture-attachments-list {
            margin-top: 5px;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            // 附件
            .lecture-attachments {
              margin-right: 25px;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: flex-start;
              .attachments-icon {
                display: inline-block;
                width: 12px;
                height: 12px;
                margin-right: 2px;
                background-image: url("@/assets/images/grayAttachment.png");
                background-size: cover;
              }
              .attachments-name {
                font-size: 12px;
                color: #666666;
                line-height: 18px;
                font-weight: 400;
              }
              &:hover {
                .attachments-icon {
                  background-image: url("@/assets/images/redAttachment.png");
                }
                .attachments-name {
                  color: #dd1d19;
                }
              }
            }
          }
        }
      }
      // 时间
      .lecture-time {
        width: 200px;
        text-align: right;
        font-size: 12px;
        color: #666666;
        line-height: 18px;
        font-weight: 400;
      }
      .lecture-right {
        margin-right: 25px;
      }
    }
  }
  :deep(.el-dialog__title) {
    font-size: 18px;
    color: #333030;
    font-weight: 700;
  }
}
</style>
